<template>
  <div class="container">
    <div>
      <el-row :gutter="1">
        <el-col :span="8">
          <el-form ref="form" :model="form">
            <el-form-item>
              <!-- <el-button size="mini" type="primary" @click="screeningData"
                >查 询</el-button
              > -->
              <el-button size="mini" type="success" @click="handleAddLine"
                >新增路段</el-button
              >
              <el-button style="padding: 0; border: 0">
                <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
                >
                  <el-button size="mini" type="success">批量导入</el-button>
                </el-upload>
              </el-button>
              <el-button size="mini" type="warning" @click="exportExcel"
                >批量导出</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
       highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <!-- <el-table-column  prop="ID" label="站点编号" align="center" ></el-table-column> -->
      <!-- [{"ID":"2","VID":"17050","LICENSE_PLATE":"津AQ8163",
      "StartTime":"02:39","StartLONGITUDE":"117.382049","StartLATITUDE":"117.382049",
      "EndLONGITUDE":"117.382049","EndLATITUDE":"117.382049","WorkPoint":"5"}] -->
      <!-- <el-table-column
        prop="ID"
        label="路线编号"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="LICENSE_PLATE"
        label="负责车辆"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="StartTime"
        label="起始时间"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="StartTime"
        label="起始点位"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="WorkPoint"
        label="路段个数"
        align="center"
      ></el-table-column>
      <el-table-column label="路段" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleRubbishPointDetail(scope.$index, scope.row)"
            >路段列表</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="编辑" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleAdd(scope.$index, scope.row)"
            >新增路段</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleShowMap(scope.$index, scope.row)"
            >计划与实际路线对比</el-button
          >
          <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 添加路线 -->
    <el-dialog title="新增路线" :visible.sync="addLineDialogShow" width="50%">
      <el-form
        ref="formLine"
        :model="formLine"
        label-width="120px"
        class="flex"
      >
        <el-form-item label="车辆：">
          <el-select
            style="width: 177px"
            v-model="formLine.carID"
            :options="optionsCar"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in optionsCar"
              :key="item.VID"
              :label="item.LICENSE_PLATE"
              :value="item.VID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出发时间：">
          <el-input
            v-model="formLine.StartTime"
            placeholder="请输入出发时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="出发点经度：">
          <el-input
            v-model="formLine.slng"
            placeholder="请输入出发点经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="出发点纬度：">
          <el-input
            v-model="formLine.slat"
            placeholder="请输入出发点纬度"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束点经度：">
          <el-input
            v-model="formLine.elng"
            placeholder="请输入结束点经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束点纬度：">
          <el-input
            v-model="formLine.elat"
            placeholder="请输入结束点纬度"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="success"
        style="float: right; margin: 20px"
        @click="handleAdd"
        >新增路段</el-button
      >
      <el-table :data="formLine.pointsData">
        <el-table-column
          prop="LOCATION"
          label="路段名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stime"
          label="开始时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="etime"
          label="结束时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="wtime"
          label="停留时间"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addLineDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitLine()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 添加路段 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="addPointDialogShow"
      width="50%"
    >
      <!-- <div id="mapDialog" style="width: 500px;height: 400px;"></div> -->
      <el-form ref="form" :model="form" label-width="140px" class="flex">
        <!-- <el-form-item label="路段名称：" >
          <el-input
            v-model="form.NAME"
            placeholder="请输入路段名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="路段名称：">
          <el-input
            id="suggestId"
            v-model="form.LOCATION"
            placeholder="请输入路段名称"
          ></el-input>
          <!-- <div>经度：125.2355 纬度：39.2588441</div> -->
        </el-form-item>
        <el-form-item label="经度：">
          <el-input
            v-model="form.LONGITUDE"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度：">
          <el-input v-model="form.LATITUDE" placeholder="请输入纬度"></el-input>
        </el-form-item>
        <el-form-item label="开始时间：">
          <el-input
            v-model="form.stime"
            placeholder="请选择开始时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束时间：">
          <el-input
            v-model="form.etime"
            placeholder="请选择结束时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="停留时间（秒）：">
          <el-input
            v-model="form.wtime"
            placeholder="工作所需停留时间"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPointDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 垃圾点位详情列表 -->
    <el-dialog
      title="途径垃圾点位详情"
      :visible.sync="rubbishPointDetailDialogShow"
      width="50%"
    >
      <el-table :data="rubbishPointsData">
        <el-table-column
          prop="PointName"
          label="路段名称"
          align="center"
        ></el-table-column>
        <el-table-column
          :formatter="formatterYJTime"
          label="预计到达时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Wtime"
          label="预计作业时长（秒）"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="dblClickRow"
            >定位</el-button
          > -->
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rubbishPointDetailDialogShow = false"
          >取 消</el-button
        >
        <!-- <el-button type="primary" @click="rubbishPointDetailDialogShow = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import export2Excel from '@/utils/exportExcel/index.js'
import eventBus from '@/eventBus.js'


export default {
  data () {
    return {
      marker: null,
      map: null,
      mapZoom: 16,

      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      isVisibleEdit: false,
      form: {
        tag: '',
        LONGITUDE: '',
        LATITUDE: '',
        LOCATION: '',
        stime: '',
        etime: '',
        wtime: '',
        lineData: {}
      },
      formLine: {
        slat: '',
        slng: '',
        StartTime: '05:00',
        elng: '',
        elat: '',
        carID: '',
        pointsData: []
      },
      addDialogTitle: '',
      // addLineDialogTitle: '',
      addLineDialogShow: false,
      addPointDialogShow: false,
      rubbishPointDetailDialogShow: false,
      rubbishPointsData: [],
      optionsCar: [],
      selectCarID: ''
    }
  },
  mounted () {
    this.getlistCar();
    this.getlistdata();
  },
  methods: {
    // 显示地图
    mapShow () {
      var point = new BMap.Point(117.691259, 39.010868)
      // 百度地图API功能
      this.map = new BMap.Map('mapDialog') // 创建Map实例
      this.map.centerAndZoom(point, this.mapZoom);
      // this.map.setCurrentCity('滨海新区') // 设置地图显示的城市 此项是必须设置的

      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true)
      // 添加可拖拽点
      this.marker = new BMap.Marker(point, {
        enableDragging: true
      });
      this.map.addOverlay(this.marker);
      // 添加地图监听事件：放大缩小范围
      const _this = this;
      this.map.addEventListener('zoomend', function (e, target) {
        _this.mapZoom = e.target.getZoom()
        console.log(_this.mapZoom)
      })
      // 添加地图监听事件：双击地图
      this.map.addEventListener('click', function (e, target) {
        // _this.map.setCenter(e.point);
        _this.marker.setPosition(e.point);
        _this.$set(_this.form, 'LONGITUDE', e.point.lng.toFixed(5))
        _this.$set(_this.form, 'LATITUDE', e.point.lat.toFixed(5))
      })

      var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
          "input": "suggestId",
          "location": this.map
        });

      ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        // G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        _this.form.LOCATION = myValue

        // G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        // _this.map.clearOverlays();    //清除地图上所有覆盖物

        var local = new BMap.LocalSearch(_this.map, { //智能搜索
          onSearchComplete: res => {
            if (local.getResults() != undefined) {
              console.log(local.getResults())
              // _this.map.clearOverlays(); //清除地图上所有覆盖物
              if (local.getResults().getPoi(0)) {
                var point = local.getResults().getPoi(0).point;
                // console.log(point)
                _this.marker.setPosition(point);
                _this.map.setCenter(point);
                _this.$set(_this.form, 'LONGITUDE', point.lng.toFixed(5))
                _this.$set(_this.form, 'LATITUDE', point.lat.toFixed(5))
              } else {
                alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
              }
            } else {
              alert("未找到搜索结果");
            }
          }
        });
        local.search(myValue);

      });
    },
    //获取点位列表
    async getlistdata () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetVehicleRubbishPlan'
      const { data } = await this.$Http.get(url)
      this.originalData = data
      this.screeningData()
    },
    async getlistCar () {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '数据加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.5)'
      // })
      let _this = this;
      // var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetRubbishHistoryVehicleCCApi?WORKDATE=' + this.setTime.selectDate + '&CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&TYPE=0'
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetRubbishHistoryVehicleCCApi?WORKDATE=2021-11-01&CLIENT_NO=0000019&TYPE=0'
      this.$axios({
        url: url,
        method: 'get',
      }).then(res => {
        loading.close()
        if (res.data) {
          _this.optionsCar = res.data
          _this.selectCarID = _this.optionsCar[0].LICENSE_PLATE
        }
      })

    },
    async handleRubbishPointDetail (index, row) {
      this.rubbishPointDetailDialogShow = true;
      // http://192.168.1.113:8099/Cityscapeapi/DataListCompany/GetVehicleRubbishPlanLine?vid=17050
      // http://192.168.1.113:8099/Cityscapeapi/DataListCompany/GetVehicleRubbishPlanLine?vid=17050
      // var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetVehicleRubbishPlanLine?vid=' + row.VID;
      // const { data } = await this.$Http.get(url)

      this.rubbishPointsData = row.PlanLinePoints;
    },
    handleShowMap (index, row) {
      this.$router.push({ path: '/ShowRoute', query: { VID: row.VID } })
    },
    // 导入Excel
    onChange (file, fileList) {
      //  console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel (e) {
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      console.log(fileReader)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          //  console.log(ev.target)
          //  console.log(this);
          const workbook = this.XLSX.read(data, {
            type: "binary"// 以字符编码的方式解析
          });

          if (workbook.SheetNames.length >= 1) {
            //  this.$message({
            //    message: "导入数据表格成功",
            //    showClose: true,
            //    type: "success"
            //  });

            const wsname = workbook.SheetNames[0]; //取第一张表
            const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            // console.log(ws)
            // this.inputExcelDataLength = ws.length
            // this.fullscreenLoading = this.$loading({
            //   lock: true,
            //   text: 'Loading',
            //   spinner: 'el-icon-loading',
            //   background: 'rgba(0, 0, 0, 0.7)'
            // })
            this.bulkLoad(ws)
          } else {
            this.$message.error("未读取到表格内容");
          }
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    async bulkLoad (ws) {
      var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
      for (let i = 2, len = ws.length - 1; i < len; i++) {
        lat.push(ws[i].lat)
        lng.push(ws[i].lng)
        stime.push(ws[i].stime)
        etime.push(ws[i].etime)
        wtime.push(ws[i].wtime)
        name.push(ws[i].name)
      }

      this.getNavigationRoute(ws[0].name, ws[1].lat, ws[1].lng, ws[ws.length - 1].lat, ws[ws.length - 1].lng, ws[1].stime, lat, lng, stime, etime, wtime, name)
    },
    async getNavigationRoute (vid, startpointlat, startpointlng, endpointlat, endpointlng, spstarttime, lat, lng, stime, etime, wtime, name) {

      // http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetNavigationRoute?vid=17062&startpointlat=117.388571&startpointlng=39.098332
      // &endpointlat=117.452125&endpointlng=39.013824&spstarttime=05:00&lat=39.080609,39.080631,39.065515,39.068975,39.098332,39.096060,39.042122
      // &lng=117.504596,117.515233,117.525066,117.527189,117.539483,117.487673,117.494447&stime=05:00,05:00,05:00,05:00,05:00,05:00,05:00&etime=23:50,23:50,23:50,23:50,23:50,23:50,23:00&wtime=278,913,425,398,376,338,600&pointname=%E9%95%BF%E5%9F%8E%E7%89%A9%E6%B5%81,%E9%95%BF%E5%9F%8E%E4%BA%8C%E6%9C%9F,%E9%94%A6%E6%B9%96%E8%BD%AE%E8%83%8E,%E5%B1%B1%E5%8F%A3%E6%B1%BD%E8%BD%A6%E7%B4%A7%E5%9B%BA%E4%BB%B6,%E9%87%91%E8%80%80%E8%8D%AF%E4%B8%9A,%E5%A4%A9%E8%99%B9%E5%85%AC%E5%AF%93%E4%B8%80%E6%9C%9F,%E9%93%B6%E6%B2%B3%E9%85%92%E5%BA%97

      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetNavigationRoute?vid=' + vid
        + '&startpointlat=' + startpointlat + '&startpointlng=' + startpointlng
        + '&endpointlat=' + endpointlat + '&endpointlng=' + endpointlng
        + '&spstarttime=' + spstarttime + '&lat=' + lat + '&lng=' + lng + '&stime=' + stime + '&etime=' + etime + '&wtime=' + wtime + '&pointname=' + name
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      let _this = this;
      console.log(url)
      // const { data } = await this.$Http.get(url)
      //   .then(data => {
      //     loading.close()
      //     if (data.linenumber) {
      //       console.log('结果')
      //       console.log(data.linenumber)
      // this.addLineDialogShow = false;
      // this.addPointDialogShow = false;
      // this.getlistdata()
      //     }
      //   })
      this.$axios({
        url: url,
        method: 'get',
      }).then(res => {
        loading.close()
        if (res.data.linenumber) {
          this.$message.success('新增成功');
          _this.addLineDialogShow = false;
          _this.addPointDialogShow = false;
          _this.getlistdata()
        } else {
          this.$message.console.error('新增失败，未计算出符合条件的路线');
        }
      })
    },
    formatterYJTime (row) {
      return row.Stime + ' - ' + row.Etime
    },
    // 导出Excel
    exportExcel () {
      const newArr = this.tableData
      let excelData = [];
      newArr.forEach((val) => {
        val.PlanLinePoints.forEach((obj) => {
          obj.LICENSE_PLATE = val.LICENSE_PLATE
          obj.StartTime = val.StartTime
          obj.WorkPoint = val.WorkPoint
          obj.YjTime = obj.Stime + " - " + obj.Etime
          excelData.push(obj)
        })
      })
      console.log("点位信息：" + excelData)
      let excelName = '作业计划'
      const tHeader = ['负责车辆', '起始时间', '路段个数', '路段名称', '预计到达时间', '预计作业时长（秒）']
      const filterVal = ['LICENSE_PLATE','StartTime', 'WorkPoint', 'PointName', 'YjTime', 'Wtime']
      export2Excel(tHeader, filterVal, excelData, excelName)
    },
    handleAddLine () {
      this.addLineDialogShow = true;
    },
    // 打开新增窗口
    handleAdd (index, row) {
      this.addDialogTitle = '新增点位信息'
      //清空编辑框
      this.form = {}
      //展示窗口
      this.addPointDialogShow = true;
      this.form.stime = row.StartTime
      this.form.etime = '23:00'
      this.form.wtime = '600'
      this.form.lineData = row;
      // let _this = this;
      // setTimeout(() => {
      //   _this.mapShow()

      // }, 1000);//延时3秒

      // this.idEdit = false;
    },
    // 打开编辑窗口
    // handleEdit (index, row) {
    //   this.form = Object.assign({}, row);
    //   this.form.CLIENT_NO_select = this.form.USERNAME
    //   this.addDialogTitle = '编辑点位信息'
    //   this.isVisibleEdit = true;
    // },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (!this.form.lineData) {
        this.formLine.pointsData.push(this.form)
        console.log(this.formLine.pointsData)
        this.addPointDialogShow = false;
        return;
      }
      var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
      var ws = this.form.lineData.PlanLinePoints
      for (let i = 0, len = ws.length; i < len; i++) {
        lat.push(ws[i].LATITUDE)
        lng.push(ws[i].LONGITUDE)
        stime.push(ws[i].Stime)
        etime.push(ws[i].Etime)
        wtime.push(ws[i].Wtime)
        name.push(ws[i].PointName)
      }
      lat.push(this.form.LATITUDE)
      lng.push(this.form.LONGITUDE)
      stime.push(this.form.stime)
      etime.push(this.form.etime)
      wtime.push(this.form.wtime)
      name.push(this.form.LOCATION)
      console.log("测试：",this.form)
      // const loading = this.$loading({
      //   lock: true,
      //   text: '数据加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.5)'
      // })
      this.getNavigationRoute(this.form.lineData.VID, this.form.lineData.StartLATITUDE, this.form.lineData.StartLONGITUDE,
        this.form.lineData.EndLATITUDE, this.form.lineData.EndLONGITUDE, this.form.lineData.StartTime, lat, lng, stime, etime, wtime, name)
      // {"ID":"21","VID":"17051","LICENSE_PLATE":"津RET071","StartTime":"02:39","StartLONGITUDE":"117.388571",
      // "StartLATITUDE":"38.852379","EndLONGITUDE":"117.426409","EndLATITUDE":"38.872884","WorkPoint":"5","PlanLinePoints":
      // if (this.addDialogTitle == '新增点位信息') {
      // this.saveAdd()
      // } else {
      // this.saveEdit()
      // }
    },
    handleSubmitLine () {
      var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
      var ws = this.formLine.pointsData
      for (let i = 0, len = ws.length; i < len; i++) {
        lat.push(ws[i].LATITUDE)
        lng.push(ws[i].LONGITUDE)
        stime.push(ws[i].stime)
        etime.push(ws[i].etime)
        wtime.push(ws[i].wtime)
        name.push(ws[i].LOCATION)
      }
      this.getNavigationRoute(this.formLine.carID, this.formLine.slat, this.formLine.slng,
        this.formLine.elat, this.formLine.elng, this.formLine.StartTime, lat, lng, stime, etime, wtime, name)
    },
    // 新增保存
    // async saveAdd () {
    //   // console.log(this.addform)
    //   this.$axios({
    //     url: '/CarService/AddPlaceWaterInfo',
    //     method: 'post',
    //     data: {
    //       NAME: this.form.NAME,
    //       LOCATION: this.form.LOCATION,
    //       LONGITUDE: this.form.LONGITUDE,
    //       LATITUDE: this.form.LATITUDE,
    //       CLIENT_NO: this.form.CLIENT_NO,
    //       TYPE: this.form.TYPE,
    //     },

    //   }).then((res) => {
    //     console.log(this.data)
    //     console.log(res)
    //     if (res.data.IsSucess) {
    //       this.$message.success('新增成功');
    //       this.isVisibleEdit = false
    //       this.getlistdata()
    //     } else {
    //       this.$message.error('新增失败');
    //     }
    //   })

    // },
    // 保存编辑
    // async saveEdit () {
    //   this.$axios({
    //     url: 'CarService/UpdataPlaceWaterInfo',
    //     method: 'post',
    //     data: {
    //       //  ID: this.form.ID,
    //       NAME: this.form.NAME,
    //       LOCATION: this.form.LOCATION,
    //       LONGITUDE: this.form.LONGITUDE,
    //       LATITUDE: this.form.LATITUDE,
    //       CLIENT_NO: this.form.CLIENT_NO,
    //       TYPE: this.form.TYPE,
    //     },

    //   }).then((res) => {
    //     console.log(this.data)
    //     console.log(res)
    //     if (res.data.IsSucess) {
    //       this.$message.success('编辑成功');
    //       this.isVisibleEdit = false
    //       this.getlistdata()
    //     } else {
    //       this.$message.error('编辑失败');
    //     }
    //   })
    // },
    //删除点位信息
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          ID: row.ID,
        }
        const { data } = await this.$Http.get('', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // if (this.select.name) this.tableData = this.tableData.filter(item => item.NAME.includes(this.select.name))
      // console.log(this.select.name)
      // eventBus.$emit('mapData_Water', this.tableData)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
  }
}
</script>
<style>
/* #map {
  width: 500px;
  height: 400px;
} */
.tangram-suggestion {
  z-index: 9999;
}
</style>